<template>
  <div
    class="node-warp"
    @contextmenu.prevent.stop="$emit('context-menu', $event)"
    @mousedown="handlerMousedown(node)"
    @click.stop="handlerMouseUp(node)"
  >
    <!--<div v-if="node.type === 'controller-start-node' || node.type === 'controller-end-node' || node.type === 'controller-route-node'" class="item-node menu-start-end-node">
      {{ node.name }}
    </div>
    <div v-else-if="node.type === 'controller-circle-start-node' || node.type === 'controller-circle-end-node'" class="item-node menu-circle-node">
      {{ node.name }}
    </div>
    <div v-else-if="node.type === 'controller-if-start-node' " class="item-node menu-node">
      {{ node.name }}
    </div>
    <div v-else-if="node.type === 'controller-if-end-node'" class="item-node menu-circle-node">
      {{ node.name }}
    </div>
    <div v-else-if="node.type === 'controller-continue-node' || node.type === 'controller-break-node'" class="item-node continue-node">
      {{ node.name }}
    </div>-->

    <el-tooltip :disabled="node.description?false:true" class="item" effect="light" placement="bottom-start">
      <div slot="content">
        {{ node.description }}
      </div>
      <div class="item-node menu-node">
        <!--in-->
        <div v-if="node.type&&node.type.indexOf('in-')==0" style="color: #00aba9;">
          {{ node.name }}
          <span v-if="node.defineVarName"> ({{node.defineVarName}}) </span>
        </div>

        <!--out-->
        <div v-else-if="node.type&&node.type==='out-log-node'" style="color: #006aba;">
          {{ node.name }}
          <span v-if="node.defineVarName"> ({{node.defineVarName}}) </span>
        </div>
        <div v-else-if="node.type&&node.type==='out-excel-node'" style="color: #006aba;">
          {{ node.name }}
          <span v-if="node.defineVarName"> ({{node.defineVarName}}) </span>
        </div>
        <div v-else-if="node.type&&node.type==='out-email-node'" style="color: #006aba;">
          {{ node.name }}
          <span v-if="node.defineVarName"> ({{node.defineVarName}}) </span>
        </div>
        <div v-else-if="node.type&&node.type==='out-notify-info-node'" style="color: #006aba;">
          {{ node.name }}
          <span v-if="node.notifyTitleVar"> ({{node.notifyTitleVar}}、</span>
          <span v-if="node.notifyContentVar"> {{node.notifyContentVar}}) </span>
        </div>
        <div v-else-if="node.type&&node.type.indexOf('out-')==0" style="color: #006aba;">
          {{ node.name }}
        </div>

        <!--code-->
        <div v-else-if="node.type&&node.type==='code-define-var-node'" style="color: #df5000;">
          {{ node.name }}
          <span v-if="node.defineVarName"> ({{node.defineVarName}}:{{node.defineVarType}}) </span>
        </div>
        <div v-else-if="node.type&&node.type==='code-sql-code-node'" style="color: #df5000;">
          {{ node.name }}
          <span v-if="node.defineVarName"> ({{node.defineVarName}}) </span>
        </div>
        <div v-else-if="node.type&&node.type.indexOf('code-')==0" style="color: #df5000;">
          {{ node.name }}
        </div>

        <!--controller-->
        <div v-else-if="node.type&&node.type==='controller-start-node'">
          {{ node.name }}
          <span v-if="node.defineVarName"> ({{node.defineVarName}}) </span>
        </div>
        <div v-else-if="node.type&&node.type==='controller-end-node'">
          {{ node.name }}
          <span v-if="node.defineVarName"> ({{node.defineVarName}}) </span>
        </div>
        <div v-else-if="node.type&&node.type==='controller-if-start-node'">
          {{ node.name }}
          <span v-if="node.ifCondition"> ({{node.ifCondition}}) </span>
        </div>
        <div v-else-if="node.type&&node.type==='controller-break-node'">
          {{ node.name }}
          <span v-if="node.breakCondition"> ({{node.breakCondition}}) </span>
        </div>
        <div v-else-if="node.type&&node.type==='controller-continue-node'">
          {{ node.name }}
          <span v-if="node.continueCondition"> ({{node.continueCondition}}) </span>
        </div>
        <div v-else-if="node.type&&node.type==='controller-combine-node'">
          {{ node.name }}
          <span v-if="node.defineVarName"> ({{node.defineVarName}}) </span>
        </div>
        <div v-else-if="node.type&&node.type==='controller-circle-start-node'">
          {{ node.name }}
          <span v-if="node.circleItemVar"> ({{node.circleItemVar}} in {{node.defineVarName}}) </span>
        </div>

        <!--ui-->
        <div v-else-if="node.type&&node.type==='ui-in-param-node'">
          {{ node.name }}
          <span v-if="node.defineVarName"> ({{node.defineVarName}}) </span>
        </div>
        <div v-else-if="node.type&&node.type==='ui-out-data-node'">
          {{ node.name }}
          <span v-if="node.defineVarName"> ({{node.defineVarName}}) </span>
        </div>

        <div v-else>
          {{ node.name }}
        </div>
      </div>

    </el-tooltip>
  </div>
</template>
<script>
export default {
  name: "menu-node",
  props: ["node"],
  mounted() {
    let jspInit = this.$store.state.taskflow.jspInit;
    this.$nextTick(() => {
      jspInit.draggable(this.node.id);
    });
  },
  methods: {
    handlerMouseUp(node) {
      let nodeEle = document.getElementById(node.id);
      let { top, left } = nodeEle.style;
      let x = left.slice(0, left.length - 2) * 1;
      let y = top.slice(0, top.length - 2) * 1;
      if (node.x !== x && node.y !== y) {
        let flowData = this.$store.state.taskflow.flowData;
        flowData.nodes.forEach((item) => {
          if (item.id === node.id) {
            item.x = x;
            item.y = y;
          }
        });
        this.$store.commit("taskflow/setFlowStepData", flowData);
      }
    },
    handlerMousedown(node) {
      if (this.$store.state.taskflow.flowMenuObj.type === "drag-drop") {
        const itemNodeArray = Array.from(document.getElementsByClassName("item-node"))
        itemNodeArray.forEach((ele) => {
          ele.classList.remove("active");
        });
        let nodeEle = document.getElementById(node.id);
        nodeEle.getElementsByClassName("item-node")[0].classList.add("active");
        this.$store.commit("taskflow/setSelectContent", { type: "node", data: node });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.node-warp {
  position: absolute;
  user-select: none;
  > div {
    background: #abc7ff31;
    border: 1px solid #abc7ff;
  }
  .active {
    border: 1px dashed #409eff;
  }
  i {
    font-size: 14px;
  }
}
/*.menu-circle-node {
  width: 50px;
  height: 40px;
  line-height: 40px;
  border-radius: 100px;
  text-align: center;
  font-size: 10px;
}
.continue-node {
  width: 70px;
  line-height: 35px;
  border-radius: 100px;
  text-align: center;
  font-size: 10px;
}
.menu-start-end-node {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 100px;
  text-align: center;
  font-size: 10px;
}*/
.menu-node {
  min-width: 30px;
  line-height: 32px;
  padding: 0px 10px ;
  border-radius: 30px;
  text-align: center;
  font-size: 10px;
}
</style>
